<template>
 <div class="params">
  <table>
      <tr v-for="item in goodsParams.rule">
          <td v-for="td in item">{{td}}</td>
      </tr>
  </table>
  <table>
      <tr v-for="item in goodsParams.info">
          <td>{{item.key}}</td>
          <td class="value">{{item.value}}</td>
      </tr>
  </table>
  <div>
      <img :src="goodsParams.image" alt="">
  </div>
 </div>
</template>
<script>
export default {
 name:'DetailParams',
 props:{
     goodsParams:{
         type:Object,
         default(){
             return {}
         }
     }
 }
}
</script>
<style scoped>
.param{border-bottom: 5px solid #f2f5f8;}
.param table tr td{text-align: center;padding: 2px 5px;border: 1px solid gray;}
.value{color: red;}
.img{width: 100%;}
</style>